<template>
	<div id="singer_checked">
		<div class="container" slot="songinfo">
			<el-form v-if="Object.keys(form).length > 0" ref="form" :model="form" label-width="auto">
				<div class="wrapper">
					<div style="display: inline-block" class="wrapper-left">
						<el-form-item label="修改前" class="title"> </el-form-item>

						<el-form-item label="图片:">
							<el-image style="width: 200px; height: 200px" :src="form.beforData.tblActorPictures[0].filePath" :fit="'fill'">
								<div slot="error" class="image-slot">
									<div slot="error" class="image-slot" style="">暂无图片</div>
								</div>
							</el-image>
						</el-form-item>

						<el-form-item label="歌手ID:">
							<el-input class="w" v-model="form.beforData.id" :disabled="true"></el-input>
						</el-form-item>

						<el-form-item label="歌手名:">
							<el-input class="w" v-model="form.beforData.name" disabled></el-input>
						</el-form-item>

						<el-form-item label="全拼:">
							<el-input class="w" v-model="form.beforData.namePinyinFull" disabled></el-input>
						</el-form-item>

						<el-form-item label="简拼:">
							<el-input class="w" v-model="form.beforData.namePinyinShort" disabled></el-input>
						</el-form-item>

						<!-- <el-form-item label="曾用名：">
							<el-input :disabled="true" class="w" v-model="form.beforData.nameUsedBefore"></el-input>
						</el-form-item>

						<el-form-item label="昵称：">
							<el-input :disabled="true" class="w" v-model="form.beforData.nickName"></el-input>
						</el-form-item> -->

						<el-form-item label="相似艺人：">
							<el-input :readonly="true" :disabled="true" class="w" v-model="form.beforData.resembleActor.join(',')">
								<i
									slot="suffix"
									class="el-input__icon el-icon-search"
									:style="{ 'font-size': '18px', cursor: 'pointer' }"
								></i>
							</el-input>
						</el-form-item>

						<el-form-item label="外文名:">
							<el-input class="w" v-model="form.beforData.foreignName" disabled></el-input>
						</el-form-item>

						<el-form-item label="别名:">
							<el-input class="w" v-model="form.beforData.aliasName" disabled></el-input>
						</el-form-item>

						<el-form-item label="是否知名歌手：">
							<el-select disabled :clearable="true" v-model="form.beforData.famousFlag" class="handle-select mr10 w">
								<el-option key="0" label="否" :value="false"></el-option>
								<el-option key="1" label="是" :value="true"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="状态：">
							<el-select disabled :clearable="true" v-model="form.beforData.status" class="handle-select mr10 w">
								<el-option key="0" label="下线" :value="0"></el-option>
								<el-option key="1" label="在线" :value="1"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="黑名单：">
							<el-select disabled :clearable="true" v-model="form.beforData.blackFlag" class="handle-select mr10 w">
								<el-option key="0" label="非黑名单" :value="false"></el-option>
								<el-option key="1" label="黑名单" :value="true"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="歌手类型：">
							<el-select disabled :clearable="true" v-model="form.beforData.type" class="handle-select mr10 w">
								<el-option key="0" label="华语男" :value="101"></el-option>
								<el-option key="1" label="华语女" :value="102"></el-option>
								<el-option key="2" label="华语组合" :value="103"></el-option>
								<el-option key="3" label="韩语男" :value="104"></el-option>
								<el-option key="4" label="韩语女" :value="105"></el-option>
								<el-option key="5" label="韩语组合" :value="106"></el-option>
								<el-option key="6" label="日语男" :value="107"></el-option>
								<el-option key="7" label="日语女" :value="108"></el-option>
								<el-option key="8" label="日语组合" :value="109"></el-option>
								<el-option key="9" label="欧美男" :value="110"></el-option>
								<el-option key="10" label="欧美女" :value="111"></el-option>
								<el-option key="11" label="欧美组合" :value="112"></el-option>
								<el-option key="12" label="乐团" :value="113"></el-option>
								<el-option key="13" label="演奏家" :value="114"></el-option>
								<el-option key="14" label="作曲家" :value="115"></el-option>
								<el-option key="15" label="指挥家" :value="116"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="歌手角色：">
							<el-select disabled :clearable="true" v-model="form.beforData.role" class="handle-select mr10 w">
								<el-option key="0" label="演唱" value="1"></el-option>
								<el-option key="1" label="演奏" value="2"></el-option>
								<el-option key="2" label="作词" value="4"></el-option>
								<el-option key="3" label="作曲" value="8"></el-option>
								<el-option key="4" label="艺术表演" value="16"></el-option>
								<el-option key="5" label="指挥" value="32"></el-option>
								<el-option key="6" label="编曲" value="64"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="绑定id:">
							<el-input class="w" v-model="form.beforData.externalId" disabled></el-input>
						</el-form-item>

						<el-form-item label="擅长的乐器:">
							<el-input class="w" v-model="form.beforData.musicalInstrument" disabled></el-input>
						</el-form-item>

						<el-form-item label="兴趣爱好:">
							<el-input class="w" v-model="form.beforData.interest" disabled></el-input>
						</el-form-item>

						<el-form-item label="职业：">
							<el-select disabled class="w" v-model="form.beforData.profession" multiple placeholder="请选择" clearable>
								<el-option v-for="(item, index) in professions" :key="index" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="代表作:">
							<el-input class="w" v-model="form.beforData.representative" disabled></el-input>
						</el-form-item>

						<el-form-item label="主要成就:">
							<el-input class="w" v-model="form.beforData.achievement" disabled></el-input>
						</el-form-item>

						<el-form-item label="荣誉记录:">
							<el-input class="w" v-model="form.beforData.honour" disabled></el-input>
						</el-form-item>

						<el-form-item label="简介:">
							<el-input
								type="textarea"
								class="w"
								placeholder="请输入内容"
								v-model="form.beforData.introduction"
								maxlength="10000"
								show-word-limit
								rows="5"
								disabled
							>
							</el-input>
						</el-form-item>

						<el-form-item label="性别：">
							<el-select disabled :clearable="true" v-model="form.beforData.gender" class="handle-select mr10 w">
								<el-option key="0" label="女" :value="0"></el-option>
								<el-option key="1" label="男" :value="1"></el-option>
								<el-option key="2" label="未知" :value="2"></el-option>
								<el-option key="3" label="组合" :value="3"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="毕业学校:">
							<el-input class="w" v-model="form.beforData.college" disabled></el-input>
						</el-form-item>

						<el-form-item label="最高学历:">
							<el-input class="w" v-model="form.beforData.education" disabled></el-input>
						</el-form-item>

						<el-form-item label="出道日期:">
							<!-- <el-date-picker v-model="value1" type="date" placeholder="选择日期"> </el-date-picker> -->
							<el-input class="w" v-model="form.beforData.debutDate" disabled></el-input>
						</el-form-item>

						<el-form-item label="区域：">
							<el-select disabled :clearable="true" v-model="form.beforData.area" class="handle-select mr10 w">
								<el-option key="1" label="华语" value="1"></el-option>
								<el-option key="2" label="欧美" value="2"></el-option>
								<el-option key="3" label="日韩" value="3"></el-option>
								<el-option key="4" label="其他" value="4"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="国籍：">
							<el-select disabled :clearable="true" v-model="form.beforData.country" class="handle-select mr10 w">
								<el-option-group v-for="group in countrys" :key="group.label" :label="group.label">
									<el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
										<span style="float: left">{{ item.label }}</span>
										<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
									</el-option>
								</el-option-group>
							</el-select>
						</el-form-item>

						<el-form-item label="出生日期：">
							<el-input class="w" v-model="form.beforData.birthday" disabled></el-input>
						</el-form-item>

						<el-form-item label="民族：">
							<el-select disabled :clearable="true" v-model="form.beforData.nation" class="handle-select mr10 w">
								<el-option v-for="(item, index) in nations" :key="index" :label="item" :value="index"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="身高：">
							<el-input class="w" v-model="form.beforData.height" disabled></el-input>
						</el-form-item>

						<el-form-item label="体重：">
							<el-input class="w" v-model="form.beforData.weight" disabled></el-input>
						</el-form-item>

						<el-form-item label="血型：">
							<el-select disabled :clearable="true" v-model="form.beforData.bloodType" class="handle-select mr10 w">
								<el-option key="0" label="A型" value="0"></el-option>
								<el-option key="1" label="B型" value="1"></el-option>
								<el-option key="2" label="O型" value="2"></el-option>
								<el-option key="3" label="AB型" value="3"></el-option>
								<el-option key="4" label="Rh阳性" value="4"></el-option>
								<el-option key="5" label="Rh阴性" value="5"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="星座：">
							<el-select disabled :clearable="true" v-model="form.beforData.constellation" class="handle-select mr10 w">
								<el-option key="1" label="水瓶座" value="1"></el-option>
								<el-option key="2" label="双鱼座" value="2"></el-option>
								<el-option key="3" label="白羊座" value="3"></el-option>
								<el-option key="4" label="金牛座" value="4"></el-option>
								<el-option key="5" label="双子座" value="5"></el-option>
								<el-option key="6" label="巨蟹座" value="6"></el-option>
								<el-option key="7" label="狮子座" value="7"></el-option>
								<el-option key="8" label="处女座" value="8"></el-option>
								<el-option key="9" label="天秤座" value="9"></el-option>
								<el-option key="10" label="天蝎座" value="10"></el-option>
								<el-option key="11" label="射手座" value="11"></el-option>
								<el-option key="12" label="摩羯座" value="12"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="从艺历程:">
							<el-input
								type="textarea"
								class="w"
								placeholder="请输入内容"
								v-model="form.beforData.artHistory"
								maxlength="10000"
								show-word-limit
								rows="5"
								disabled
							>
							</el-input>
						</el-form-item>

						<el-form-item label="打标签：">
							<!-- <el-select disabled :clearable="true" v-model="form.beforData['打标签']" class="handle-select mr10 w">
                                <el-option key="0" label="下线" :value="0"></el-option>
                                <el-option key="1" label="在线" :value="1"></el-option>
                            </el-select> -->
							<el-cascader
								disabled
								:show-all-levels="true"
								v-model="form.beforData.tagIds"
								class="w"
								:options="tagList"
								:props="{
									emitPath: false,
									multiple: true,
									checkStrictly: true,
									value: 'value',
									label: 'label',
									children: 'children'
								}"
								@change="handlechange"
							>
								<template slot-scope="{ node, data }">
									<span>{{ data.label }}</span>
									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</div>
					<div style="display: inline-block" class="wrapper-right">
						<el-form-item label="修改后" class="title"> </el-form-item>
						<el-form-item label="图片:">
							<el-image
								style="width: 200px; height: 200px"
								:src="form.afterDate.tblActorPictures[0].filePath || form.beforData.tblActorPictures[0].filePath"
								:fit="'fill'"
							>
								<div slot="error" class="image-slot" style="">暂无图片</div>
							</el-image>
						</el-form-item>

						<el-form-item label="歌手ID:" :required="form.afterDate.id != form.beforData.id">
							<el-input class="w" v-model="form.afterDate.id" :disabled="true"></el-input>
						</el-form-item>

						<el-form-item label="歌手名:" :required="form.afterDate.name != form.beforData.name">
							<el-input class="w" v-model="form.afterDate.name" disabled></el-input>
						</el-form-item>

						<el-form-item label="全拼:" :required="form.afterDate.namePinyinFull != form.beforData.namePinyinFull">
							<el-input class="w" v-model="form.afterDate.namePinyinFull" disabled></el-input>
						</el-form-item>

						<el-form-item label="简拼:" :required="form.afterDate.namePinyinShort != form.beforData.namePinyinShort">
							<el-input class="w" v-model="form.afterDate.namePinyinShort" disabled></el-input>
						</el-form-item>

						<!-- <el-form-item label="曾用名：" :required="form.afterDate.nameUsedBefore != form.beforData.nameUsedBefore">
							<el-input :disabled="true" class="w" v-model="form.afterDate.nameUsedBefore"></el-input>
						</el-form-item>

						<el-form-item label="昵称：" :required="form.afterDate.nickName != form.beforData.nickName">
							<el-input :disabled="true" class="w" v-model="form.afterDate.nickName"></el-input>
						</el-form-item> -->

						<el-form-item label="相似艺人：">
							<el-input
								:readonly="true"
								:disabled="true"
								class="w"
								:required="form.afterDate.resembleActor.join(',') != form.beforData.resembleActor.join(',')"
								v-model="form.afterDate.resembleActor.join(',')"
							>
								<i
									slot="suffix"
									class="el-input__icon el-icon-search"
									:style="{ 'font-size': '18px', cursor: 'pointer' }"
								></i>
							</el-input>
						</el-form-item>

						<el-form-item label="外文名:" :required="form.afterDate.foreignName != form.beforData.foreignName">
							<el-input class="w" v-model="form.afterDate.foreignName" disabled></el-input>
						</el-form-item>

						<el-form-item label="别名:" :required="form.afterDate.aliasName != form.beforData.aliasName">
							<el-input class="w" v-model="form.afterDate.aliasName" disabled></el-input>
						</el-form-item>

						<el-form-item label="是否知名歌手：" :required="form.afterDate.famousFlag != form.beforData.famousFlag">
							<el-select disabled :clearable="true" v-model="form.afterDate.famousFlag" class="handle-select mr10 w">
								<el-option key="0" label="否" :value="false"></el-option>
								<el-option key="1" label="是" :value="true"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="状态：" :required="form.afterDate.status != form.beforData.status">
							<el-select disabled :clearable="true" v-model="form.afterDate.status" class="handle-select mr10 w">
								<el-option key="0" label="下线" :value="0"></el-option>
								<el-option key="1" label="在线" :value="1"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="黑名单：" :required="form.afterDate.blackFlag != form.beforData.blackFlag">
							<el-select disabled :clearable="true" v-model="form.afterDate.blackFlag" class="handle-select mr10 w">
								<el-option key="0" label="非黑名单" :value="false"></el-option>
								<el-option key="1" label="黑名单" :value="true"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="歌手类型：" :required="form.afterDate.type != form.beforData.type">
							<el-select disabled :clearable="true" v-model="form.afterDate.type" class="handle-select mr10 w">
								<el-option key="0" label="华语男" :value="101"></el-option>
								<el-option key="1" label="华语女" :value="102"></el-option>
								<el-option key="2" label="华语组合" :value="103"></el-option>
								<el-option key="3" label="韩语男" :value="104"></el-option>
								<el-option key="4" label="韩语女" :value="105"></el-option>
								<el-option key="5" label="韩语组合" :value="106"></el-option>
								<el-option key="6" label="日语男" :value="107"></el-option>
								<el-option key="7" label="日语女" :value="108"></el-option>
								<el-option key="8" label="日语组合" :value="109"></el-option>
								<el-option key="9" label="欧美男" :value="110"></el-option>
								<el-option key="10" label="欧美女" :value="111"></el-option>
								<el-option key="11" label="欧美组合" :value="112"></el-option>
								<el-option key="12" label="乐团" :value="113"></el-option>
								<el-option key="13" label="演奏家" :value="114"></el-option>
								<el-option key="14" label="作曲家" :value="115"></el-option>
								<el-option key="15" label="指挥家" :value="116"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="歌手角色：" :required="form.afterDate.role != form.beforData.role">
							<el-select disabled :clearable="true" v-model="form.afterDate.role" class="handle-select mr10 w">
								<el-option key="0" label="演唱" value="1"></el-option>
								<el-option key="1" label="演奏" value="2"></el-option>
								<el-option key="2" label="作词" value="4"></el-option>
								<el-option key="3" label="作曲" value="8"></el-option>
								<el-option key="4" label="艺术表演" value="16"></el-option>
								<el-option key="5" label="指挥" value="32"></el-option>
								<el-option key="6" label="编曲" value="64"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="绑定id:" :required="form.afterDate.externalId != form.beforData.externalId">
							<el-input class="w" v-model="form.afterDate.externalId" disabled></el-input>
						</el-form-item>

						<el-form-item label="擅长的乐器:" :required="form.afterDate.musicalInstrument != form.beforData.musicalInstrument">
							<el-input class="w" v-model="form.afterDate.musicalInstrument" disabled></el-input>
						</el-form-item>

						<el-form-item label="兴趣爱好:" :required="form.afterDate.interest != form.beforData.interest">
							<el-input class="w" v-model="form.afterDate.interest" disabled></el-input>
						</el-form-item>

						<el-form-item
							label="职业："
							:required="
								JSON.stringify([...form.afterDate.profession].sort()) !=
								JSON.stringify([...form.beforData.profession].sort())
							"
						>
							<el-select disabled class="w" v-model="form.afterDate.profession" multiple placeholder="请选择" clearable>
								<el-option v-for="(item, index) in professions" :key="index" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="代表作:" :required="form.afterDate.representative != form.beforData.representative">
							<el-input class="w" v-model="form.afterDate.representative" disabled></el-input>
						</el-form-item>

						<el-form-item label="主要成就:" :required="form.afterDate.achievement != form.beforData.achievement">
							<el-input class="w" v-model="form.afterDate.achievement" disabled></el-input>
						</el-form-item>

						<el-form-item label="荣誉记录:" :required="form.afterDate.honour != form.beforData.honour">
							<el-input class="w" v-model="form.afterDate.honour" disabled></el-input>
						</el-form-item>

						<el-form-item label="简介:" :required="form.afterDate.introduction != form.beforData.introduction">
							<el-input
								type="textarea"
								class="w"
								placeholder="请输入内容"
								v-model="form.afterDate.introduction"
								maxlength="10000"
								show-word-limit
								rows="5"
								disabled
							>
							</el-input>
						</el-form-item>

						<el-form-item label="性别：" :required="form.afterDate.gender != form.beforData.gender">
							<el-select disabled :clearable="true" v-model="form.afterDate.gender" class="handle-select mr10 w">
								<el-option key="0" label="女" :value="0"></el-option>
								<el-option key="1" label="男" :value="1"></el-option>
								<el-option key="2" label="未知" :value="2"></el-option>
								<el-option key="3" label="组合" :value="3"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="毕业学校:" :required="form.afterDate.college != form.beforData.college">
							<el-input class="w" v-model="form.afterDate.college" disabled></el-input>
						</el-form-item>

						<el-form-item label="最高学历:" :required="form.afterDate.education != form.beforData.education">
							<el-input class="w" v-model="form.afterDate.education" disabled></el-input>
						</el-form-item>

						<el-form-item label="出道日期:" :required="form.afterDate.debutDate != form.beforData.debutDate">
							<!-- <el-date-picker v-model="value1" type="date" placeholder="选择日期"> </el-date-picker> -->
							<el-input class="w" v-model="form.afterDate.debutDate" disabled></el-input>
						</el-form-item>

						<el-form-item label="区域：" :required="form.afterDate.area != form.beforData.area">
							<el-select disabled :clearable="true" v-model="form.afterDate.area" class="handle-select mr10 w">
								<el-option key="1" label="华语" value="1"></el-option>
								<el-option key="2" label="欧美" value="2"></el-option>
								<el-option key="3" label="日韩" value="3"></el-option>
								<el-option key="4" label="其他" value="4"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="国籍：" :required="form.afterDate.country != form.beforData.country">
							<el-select disabled :clearable="true" v-model="form.afterDate.country" class="handle-select mr10 w">
								<el-option-group v-for="group in countrys" :key="group.label" :label="group.label">
									<el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
										<span style="float: left">{{ item.label }}</span>
										<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
									</el-option>
								</el-option-group>
							</el-select>
						</el-form-item>

						<el-form-item label="出生日期：" :required="form.afterDate.birthday != form.beforData.birthday">
							<el-input class="w" v-model="form.afterDate.birthday" disabled></el-input>
						</el-form-item>

						<el-form-item label="民族：" :required="form.afterDate.nation != form.beforData.nation">
							<el-select disabled :clearable="true" v-model="form.afterDate.nation" class="handle-select mr10 w">
								<el-option v-for="(item, index) in nations" :key="index" :label="item" :value="index"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="身高：" :required="form.afterDate.height != form.beforData.height">
							<el-input class="w" v-model="form.afterDate.height" disabled></el-input>
						</el-form-item>

						<el-form-item label="体重：" :required="form.afterDate.weight != form.beforData.weight">
							<el-input class="w" v-model="form.afterDate.weight" disabled></el-input>
						</el-form-item>

						<el-form-item label="血型：" :required="form.afterDate.bloodType != form.beforData.bloodType">
							<el-select disabled :clearable="true" v-model="form.afterDate.bloodType" class="handle-select mr10 w">
								<el-option key="0" label="A型" value="0"></el-option>
								<el-option key="1" label="B型" value="1"></el-option>
								<el-option key="2" label="O型" value="2"></el-option>
								<el-option key="3" label="AB型" value="3"></el-option>
								<el-option key="4" label="Rh阳性" value="4"></el-option>
								<el-option key="5" label="Rh阴性" value="5"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="星座：" :required="form.afterDate.constellation != form.beforData.constellation">
							<el-select disabled :clearable="true" v-model="form.afterDate.constellation" class="handle-select mr10 w">
								<el-option key="0" label="水瓶座" value="0"></el-option>
								<el-option key="1" label="双鱼座" value="1"></el-option>
								<el-option key="2" label="金牛座" value="2"></el-option>
								<el-option key="3" label="双子座" value="3"></el-option>
								<el-option key="4" label="狮子座" value="4"></el-option>
								<el-option key="5" label="处女座" value="5"></el-option>
								<el-option key="6" label="天秤座" value="6"></el-option>
								<el-option key="7" label="天蝎座" value="7"></el-option>
								<el-option key="8" label="射手座" value="8"></el-option>
								<el-option key="9" label="摩羯座" value="9"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="从艺历程:" :required="form.afterDate.artHistory != form.beforData.artHistory">
							<el-input
								type="textarea"
								class="w"
								placeholder="请输入内容"
								v-model="form.afterDate.artHistory"
								maxlength="10000"
								show-word-limit
								rows="5"
								disabled
							>
							</el-input>
						</el-form-item>

						<el-form-item
							label="打标签："
							:required="
								JSON.stringify([...form.afterDate.tagIds].sort()) != JSON.stringify([...form.beforData.tagIds].sort())
							"
						>
							<!-- <el-select disabled :clearable="true" v-model="form.afterDate['打标签']" class="handle-select mr10 w">
                                <el-option key="0" label="下线" :value="0"></el-option>
                                <el-option key="1" label="在线" :value="1"></el-option>
                            </el-select> -->

							<el-cascader
								disabled
								:show-all-levels="true"
								v-model="form.afterDate.tagIds"
								class="w"
								:options="tagList"
								:props="{
									emitPath: false,
									multiple: true,
									checkStrictly: true,
									value: 'value',
									label: 'label',
									children: 'children'
								}"
								@change="handlechange"
							>
								<template slot-scope="{ node, data }">
									<span>{{ data.label }}</span>
									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</div>
				</div>
			</el-form>

			<el-row>
				<el-button type="primary" @click="handlePass">通过</el-button>
				<el-button @click="handleRefuse">拒绝</el-button>
			</el-row>
		</div>

		<el-dialog title="备注" :visible.sync="visible" width="30%">
			<el-form ref="reason" :model="reason" label-width="70px">
				<el-form-item label="">
					<el-input
						v-model="reason.remark"
						maxlength="120"
						show-word-limit
						type="textarea"
						:autosize="{ minRows: 10, maxRows: 15 }"
						placeholder="请填写拒绝原因"
					></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="refuse">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import { mapGetters, mapMutations, mapActions } from 'vuex';
	import { countrys } from '@/components/common/';
	import { nations } from '@/components/common/';
	export default {
		name: 'SingerChecked',

		components: {},
		watch: {
			// '$route.query'(a, b) {
			//     console.log(a, b);
			//     if (a.id && b.id && a.id != b.id) {
			//         this.getDataById(this.$route.query.id);
			//     }
			// },
			'$route.path'(a, b) {
				console.log(a, b);
				if (a != '/song/checked') {
					// this.tableData[this.tableData.length - 1].preview = 1;
				}
			}
		},
		data() {
			return {
				tagList: [],
				accept: '.lrc',
				baseUrl: process.env.VUE_APP_SRC1,
				countrys,
				nations,
				reason: {
					remark: ''
				},
				visible: false,
				professions: [
					{ value: '1', label: '歌手' },
					{ value: '2', label: '演员' },
					{ value: '3', label: '主持人' },
					{ value: '4', label: '作曲家' },
					{ value: '5', label: '制作人' },
					{ value: '6', label: '配音演员' },
					{ value: '7', label: '作家' },
					{ value: '8', label: '导演' },
					{ value: '9', label: 'DJ' },
					{ value: '10', label: '歌唱家' },
					{ value: '11', label: '指挥家' },
					{ value: '12', label: '模特' },
					{ value: '13', label: '乐队主唱' },
					{ value: '14', label: '唱作人' },
					{ value: '15', label: '曲作者' },
					{ value: '16', label: '词作者' },
					{ value: '17', label: '作词家' },
					{ value: '18', label: '乐队吉他手' },
					{ value: '19', label: '乐队贝斯手' },
					{ value: '20', label: '乐队鼓手' },
					{ value: '21', label: '乐队键盘手' },
					{ value: '22', label: '演奏家' },
					{ value: '23', label: '编剧' },
					{ value: '24', label: '配乐师' },
					{ value: '25', label: '编曲' },
					{ value: '26', label: '录音师' },
					{ value: '27', label: '制片人' },
					{ value: '28', label: '独立音乐人' },
					{ value: '29', label: '原创音乐人' },
					{ value: '30', label: '乐评人' },
					{ value: '31', label: 'FUNS歌手' },
					{ value: '32', label: '视频彩铃首席体验官' }
				],

				form: {}
			};
		},
		destroyed() {
			if (!this.tagsList.some((item) => item.name === 'SingerChecked')) {
				localStorage.removeItem('id_singer');
			} else {
				//  什么都不做
			}
		},
		activated() {
			if (this.$route.query.id) {
				this.getDataById(this.$route.query.id);
				this.getTagData();
				this.form = {};
			}
		},
		computed: {
			...mapGetters(['tagsList'])
		},
		methods: {
			handlechange(value) {
				console.log(value); // 这里的值会输出 value 的一个数组
			},
			async getTagData() {
				try {
					let url = '/tag/tagAll';
					let { data: res } = await this.$http[2].get(url, {
						params: {
							type: 3
							// page: this.query.pageIndex,
							// size: this.query.pageSize
						}
					});
					// console.log('标签列表', res);
					if (res.code != '0000') {
						throw new Error(res.message);
					}
					if (res.data && res.data.length && res.data.length != 0) {
						res.data.map((v) => {
							v.disabled = true;
						});
						var ret = this.formatData(res.data);
						console.log('ret', ret);
						this.tagList = ret;
					} else {
						this.tagList = [];
					}
				} catch (err) {
					console.dir(err);
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
			},
			formatData(array) {
				for (let item of array) {
					item.value = item.id;
					item.label = item.description;
					item.children = [];
					// 删除返回的没用的属性
					delete item.type;
					delete item.createTime;
					delete item.description;
					delete item.groupId;
					delete item.id;
					delete item.name;
					delete item.status;
					delete item.updateTime;
					delete item.pid;

					if (item.tblTags && item.tblTags.length != 0) {
						item.children = item.tblTags;
						// 删除返回的没用的属性
						delete item.tblTags;
						this.formatData(item.children);
					} else {
						delete item.children;
					}
				}
				return array;
			},
			...mapMutations(['SET_TAGSLIST', 'SET_QUKUARTIST_DATA']),

			// 获取歌曲信息
			async getDataById(sid) {
				try {
					let url = '/artist/info';
					let { data: res } = await this.$http[0].get(url, {
						params: this.$removeField({
							id: sid
						})
					});
					console.log(res);
					if (res.code != '0000') {
						throw new Error(res.message);
					}
					var ret = { ...res.data };
					// 筛选需要的字段
					if (ret.beforData) {
						let requiredFields = {
							tblActorPictures: [{ filePath: '' }],
							id: '',
							name: '',
							namePinyinFull: '',
							namePinyinShort: '',
							// nameUsedBefore: '',
							// nickName: '',
							resembleActor: [],
							foreignName: '',
							aliasName: '',
							famousFlag: '',
							status: '',
							blackFlag: '',
							type: '',
							role: '',
							externalId: '',
							musicalInstrument: '',
							interest: '',
							profession: '',
							representative: '',
							achievement: '',
							honour: '',
							introduction: '',
							gender: '',
							college: '',
							education: '',
							debutDate: '',
							area: '',
							country: '',
							birthday: '',
							nation: '',
							height: '',
							weight: '',
							bloodType: '',
							constellation: '',
							artHistory: '',
							tagIds: []
						};
						ret.beforData = this.$chooseFields(ret.beforData, Object.keys(requiredFields), {}, requiredFields);
						ret.beforData.profession = res.data.beforData.profession ? res.data.beforData.profession.split(',') : [];
					} else {
						ret.beforData = {};
					}

					// 中间处理:
					// 歌手图片
					ret.beforData.tblActorPictures[0].filePath = ret.beforData.tblActorPictures[0].filePath
						? `${process.env.VUE_APP_SRC1}/api/stream/audio?path=${ret.beforData.tblActorPictures[0].filePath}`
						: '';
					// 出道日期
					ret.beforData.debutDate = this.$dateFormat(ret.beforData.debutDate, '', '-');
					// 出生日期
					ret.beforData.birthday = this.$dateFormat(ret.beforData.birthday, '', '-');

					console.log(ret.beforData);
					if (ret.afterDate) {
						let requiredFields = {
							tblActorPictures: [
								{
									filePath: ''
								}
							],
							id: '',
							name: '',
							namePinyinFull: '',
							namePinyinShort: '',
							// nameUsedBefore: '',
							// nickName: '',
							resembleActor: [],
							foreignName: '',
							aliasName: '',
							famousFlag: '',
							status: '',
							blackFlag: '',
							type: '',
							role: '',
							externalId: '',
							musicalInstrument: '',
							interest: '',
							profession: '',
							representative: '',
							achievement: '',
							honour: '',
							introduction: '',
							gender: '',
							college: '',
							education: '',
							debutDate: '',
							area: '',
							country: '',
							birthday: '',
							nation: '',
							height: '',
							weight: '',
							bloodType: '',
							constellation: '',
							artHistory: '',
							tagIds: []
						};
						ret.afterDate = this.$chooseFields(ret.afterDate, Object.keys(requiredFields), {}, requiredFields);
					} else {
						ret.afterDate = {};
					}

					// 中间处理:
					// 歌手图片
					// ret.afterDate.tblActorPictures[0].filePath = ret.afterDate.tblActorPictures[0].filePath
					//     ? `${process.env.VUE_APP_SRC1}/api/stream/audio?path=${ret.afterDate.tblActorPictures[0].filePath}`
					//     : '';

					ret.afterDate.tblActorPictures[0].filePath = '';
					// 出道日期
					ret.afterDate.debutDate = this.$dateFormat(ret.afterDate.debutDate, '', '-');
					// 出生日期
					ret.afterDate.birthday = this.$dateFormat(ret.afterDate.birthday, '', '-');

					ret.afterDate.profession = res.data.afterDate.profession ? res.data.afterDate.profession.split(',') : [];

					this.form = ret;
					this.getTblActorPictures();
				} catch (err) {
					console.dir(err);
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
			},
			async getTblActorPictures() {
				try {
					let url = '/artist/getpic';
					// let { data: res } = await this.$http[0].get(url, {
					let res = await this.$http[0].get(url, {
						params: this.$removeField({
							id: this.$route.query.id
						}),
						headers: {
							name: localStorage.getItem('ms_username')
						},
						responseType: 'blob' // 二进制流转Blob对象
					});
					console.log(res); // 得到Blob对象
					// if (res + '' != '[object Blob]') {
					//     throw new Error(res.message);
					// }
					if (res.headers['content-type']) {
						// 此时没有二进制流返回
						return;
					}
					// blob对象转File对象
					let file = new File([res.data], '图片', { type: res.data.type });
					console.log(file); // 得到File对象
					// File对象转blob协议的URL
					let filedir = this.$getObjectURL(file);
					console.log(filedir);

					this.form.afterDate.tblActorPictures[0].filePath = filedir;
				} catch (err) {
					console.dir(err);
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
			},
			setTag() {},
			rowClass({ row, rowIndex }) {
				return 'height: 26px;background-color:#409EFF !important;color:#fff; text-align: center;';
			},

			handleClick(e, row) {
				console.log(e, row);

				if (row.type == 'FLAC-1000K-FTD') {
					// 播放音乐
					this.togglePlaying(e, row);
				} else {
					this.open();
				}
			},

			handleClick_(e, row) {
				console.log(e, row);

				if (row.type == 'FLAC-1000K-FTD') {
					// 播放音乐
					this.togglePlaying_(e, row);
				} else {
					this.open_();
				}
			},
			open() {
				this.$alert(`<div style='overflow : auto;  height: 666px;'>` + this.lyricString + `</div>`, '歌词预览', {
					dangerouslyUseHTMLString: true
				});
			},
			open_() {
				this.$alert(`<div style='overflow : auto;  height: 666px;'>` + this.lyricString_ + `</div>`, '歌词预览', {
					dangerouslyUseHTMLString: true
				});
			},

			handlePass() {
				this.$confirm('确定要通过吗？', '提示', {
					type: 'warning'
				})
					.then(() => {
						this.pass();
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消通过'
						});
					});
			},

			async pass() {
				try {
					let url = '/artist/update';
					let { data: res } = await this.$http[0].get(url, {
						headers: {
							name: localStorage.getItem('ms_username')
						},
						params: this.$removeField({
							id: this.$route.query.id
						})
					});
					console.log(res);
					if (res.code != '0000') {
						throw new Error(res.message);
					}
					this.$message.success({
						message: res.message,
						duration: 1500
					});
					this.$closeActiveTag.call(this);
					this.$router.replace({
						path: '/singer_/admin'
					});
					this.SET_QUKUARTIST_DATA([]);
				} catch (err) {
					console.dir(err);
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
			},

			handleRefuse() {
				this.visible = true;
				this.reason.remark = '';
			},
			async refuse() {
				try {
					let url = '/artist/auditless';
					let { data: res } = await this.$http[0].get(url, {
						params: this.$removeField({
							id: this.$route.query.id,
							remark: this.reason.remark
						}),
						headers: {
							name: localStorage.getItem('ms_username')
						}
					});
					this.visible = false;
					this.$message.success({
						message: res.message,
						duration: 1500
					});
					this.$closeActiveTag.call(this);
					this.$router.replace({
						path: '/singer_/admin'
					});
					this.SET_QUKUARTIST_DATA([]);
				} catch (err) {
					console.dir(err);
					this.visible = false;
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	.el-message-box__wrapper[aria-label='歌词预览'] {
		.el-message-box {
			width: 666px !important;
		}
	}

	#singer_checked {
		.el-image {
			line-height: 200px;
			background: #f3f6f9;
			.image-slot {
				text-align: center;
				color: #606266;
			}
		}

		.handle-box {
			margin-bottom: 20px;
		}

		.handle-select {
			width: 185px;
		}

		.handle-input {
			width: 300px;
			display: inline-block;
		}

		.red {
			color: #ff0000;
		}
		.mr10 {
			margin-right: 10px;
		}
		.table-td-thumb {
			display: block;
			margin: auto;
			width: 40px;
			height: 40px;
		}
		.w {
			// width: 470px !important;
			width: 100% !important;
		}

		.wrapper {
			display: grid;
			grid-template-columns: 50% 50%;
			justify-content: center;
			justify-items: center;
			grid-auto-flow: row;
			align-items: flex-start;
			align-content: flex-start;
			.title {
				.el-form-item__label {
					color: #0099ff;
					font-size: 16px;
					font-weight: bold;
					text-decoration: underline;
					cursor: pointer;
				}
			}
			.wrapper-left {
				width: 100%;
				padding-right: 50px;
				.el-form-item {
					.el-form-item__label-wrap {
						margin-left: 0px !important;
						width: 160px;
						text-align: right;
					}
					.el-form-item__content {
						margin-left: 160px !important;
					}
				}
			}
			.wrapper-right {
				width: 100%;
				.el-form-item {
					.el-form-item__label-wrap {
						margin-left: 0px !important;
						width: 160px;
						text-align: right;
					}
					.el-form-item__content {
						margin-left: 160px !important;
					}
				}
			}
		}

		.table {
			width: 100%;
			text-align: center;
			margin-bottom: 10px;
			font-size: 14px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.el-table {
				display: inline-block;
				width: 100%;
				&:first-of-type {
					margin-right: 40px;
					margin-left: 30px;
				}
				&:nth-of-type(2) {
					margin-left: 40px;
				}
				.u1048_icon {
					width: 28px;
					height: 34px;
				}
				.play_icon,
				.pause_icon {
					width: 43px;
					height: 37px;
				}
				.u1049_icon {
					width: 22px;
					height: 9px;
				}
				.btn {
					position: relative;
					display: inline-block;
					text-align: center;
					color: #fff;
					text-decoration: none;
					width: 80px;
					height: 32px;
					line-height: 32px;
					background: #409eff;
					border-radius: 3px;
					font-size: 12px;
					vertical-align: middle;
					margin-left: 10px;
				}
				input[name='file'] {
					opacity: 0;
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
				}
			}
		}
		.el-row {
			// padding-left: 10%;
			text-align: right;
		}
	}
</style>
